<template>
  <div style="display: flex;flex-direction: column;">
    <div style="width: 100%;height: 80vh;display: flex;flex-direction: row;flex-wrap: wrap;overflow-y: scroll">
      <Wordbook v-for="(book,i) in books" :key="book.id" :bookname="book.bookname" :numbero="book.total"></Wordbook>
    </div>
    <el-upload
        action="/api/book/add"
        :on-success="filesUploadSuccess"
    >
      <el-button type="primary" round @click="addBook" icon="Upload">添加单词书</el-button>
    </el-upload>
  </div>


</template>

<script>
import Wordbook from "@/components/Wordbook";
import request from "@/utils/request";
export default {
  name: "Book",
  components: {Wordbook},
  created(){
    request.post("/api/book/get",{}).then(res=>{
      console.log(res)
      this.books = res.data;
    })
  },
  methods:{
    addBook(){

    },
    filesUploadSuccess(res){
      console.log(res)
    }
  },
  data(){
    return {
      books:[]
    }
  }
}
</script>

<style scoped>
  .el-button{
    margin: 10px;
    width: 150px;
    height: 36px;
    font-size: 18px;
  }
</style>
